@import '/src/common/mdcss/Themes/themeVariables.less';

.ming.Checkbox {
  display: block;
  cursor: pointer;
  &.flexRow {
    display: flex;
  }
  span {
    vertical-align: middle;
  }
  .Checkbox-box {
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid transparent;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
    & > i.icon {
      display: inline-block;
      font-size: 14px;
      color: #fff;
      line-height: 16px;
      width: 16px;
      text-align: center;
      vertical-align: top;
    }
    &--small {
      width: 14px;
      height: 14px;
      & > i.icon {
        font-size: 12px;
        line-height: 12px;
        width: 12px;
      }
    }
  }

  &.indeterminate {
    .Checkbox-box.Checkbox-box--small:after {
      width: 6px;
      height: 5px;
    }
  }

  &.clearselected {
    .Checkbox-box {
      background-color: #2196f3 !important;
      border-color: #2196f3 !important;
      &:hover {
        background-color: #2182f3 !important;
        border-color: #2182f3 !important;
      }
      & > i.icon {
        display: inline-block;
      }
    }
  }

  &.indeterminate .Checkbox-box:after {
    content: '';
    display: inline-block;
    position: absolute;
    background-color: @themeColor3;
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
  }

  &.checked .Checkbox-box {
    background-color: @themeColor3;
    & > i.icon {
      display: inline-block;
    }
  }
  &:not(.checked) .Checkbox-box {
    background-color: #fff;
    border: 1px solid #bdbdbd;
  }
  &:not(.checked):not(.Checkbox--disabled) .Checkbox-box {
    &:hover {
      border-color: #9e9e9e;
    }
  }
  &.Checkbox--light {
    .Checkbox-box {
      background-color: #fff;
    }
    &.checked .Checkbox-box {
      color: @themeColor3;
      border-color: @themeColor3;
      & > i.icon {
        color: @themeColor3;
      }
    }
    &.Checkbox--disabled {
      color: #9e9e9e;
      &.checked .Checkbox-box {
        & > i.icon {
          color: #9e9e9e;
        }
      }
      cursor: default;
      .Checkbox-box {
        border-color: #ddd;
        background-color: #f5f5f5;
      }
      &.checked .Checkbox-box {
        background-color: #f5f5f5;
      }
    }
  }

  &.Checkbox--disabled {
    color: #9e9e9e;
    cursor: default;
    .Checkbox-box {
      border-color: #ddd;
      background-color: #f5f5f5;
    }
    &.checked .Checkbox-box {
      background-color: #bdbdbd;
    }
  }
}
